<template>
  <vue-cropper
    ref="wjCropper"
    v-loading="uploading"
    element-loading-text="上传中.."
    :img="img"
    :info="true"
    :info-true="true"
    :can-scale="false"
    :fixed="fixed"
    :fixed-number="option.fixedNumber"
    :can-move="option.canMove"
    :can-move-box="option.canMoveBox"
    :fixed-box="fixedBox"
    :center-box="option.centerBox"
    :full="true"
    :auto-crop="true"
    :auto-crop-width="autoCropWidth"
    :auto-crop-height="autoCropHeight"
    @imgLoad="imgLoad"
    @real-time="realTime"
  />
</template>

<script>
import request from '@/utils/request'
import { VueCropper } from 'vue-cropper'

export default {
  name: 'WjCropper',
  components: {
    VueCropper
  },
  props: {
    img: {
      type: String,
      default: ''
    },
    autoCropWidth: {
      type: Number,
      default: 9999
    },
    autoCropHeight: {
      type: Number,
      default: 9999
    },
    //  是否开启截图框宽高固定比例
    fixed: {
      type: Boolean,
      default: false
    },
    // 固定截图框大小 不允许改变
    fixedBox: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      uploading: false,
      option: {
        // 截图框的宽高比例, fixed开启才生效
        fixedNumber: [this.autoCropWidth, this.autoCropHeight],
        // 上传图片是否可以移动
        canMove: false,
        canMoveBox: true,
        centerBox: true
      }
    }
  },
  // beforeCreate: function() {
  //   Vue.use(window['vue-cropper'])
  // },
  methods: {
    /**
       * 输出图片数据
       * @param type base64或者blob
       */
    crop: function(type) {
      const _this = this;
      this.$refs.wjCropper.getCropData(function(data) {
        _this.cropImg = data;
        console.log(data);
      })
    },
    /**
     * 裁剪并且上传, 是异步方法
     * @param callback 图片裁剪上传成功后的回调, 会设置服务端返回结果作为参数
     */
    cropUpload: function(callback) {
      if (!callback) {
        alert('请设置回调');
        return;
      }
      var _this = this;
      this.uploading = true;
      this.$refs.wjCropper.getCropData(function(data) {
        request({
          method: 'post',
          url: '/file/upload/uploadBase64',
          data: {
            data: data
          }
        }).then(res => {
          _this.uploading = false;
          callback(res.data)
        }, err => {
          console.log(err);
          _this.uploading = false;
        })
      })
    },
    // 实时预览函数
    realTime: function(data) {
      this.previews = data;
    },
    imgLoad() {
      // 图片加载后, 如果没有设置指定宽高则将裁剪框铺满
      this.$nextTick(() => {
        if (this.autoCropWidth === 9999 && this.autoCropHeight === 9999) {
          this.$refs.wjCropper.cropW = this.$refs.wjCropper.trueWidth * this.$refs.wjCropper.scale;
          this.$refs.wjCropper.cropH = this.$refs.wjCropper.trueHeight * this.$refs.wjCropper.scale;
        } else {
          if (this.$refs.wjCropper.autoCropWidth * this.$refs.wjCropper.scale <= this.$refs.wjCropper.cropW) {
            this.$refs.wjCropper.cropW = this.$refs.wjCropper.autoCropWidth * this.$refs.wjCropper.scale;
          }
          if (this.$refs.wjCropper.autoCropHeight * this.$refs.wjCropper.scale <= this.$refs.wjCropper.cropH) {
            this.$refs.wjCropper.cropH = this.$refs.wjCropper.autoCropHeight * this.$refs.wjCropper.scale;
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
